<!--
 * @Description:
 * @version:
 * @Author: 陈捷
 * @Date: 2022-04-07 17:20:13
 * @LastEditors: 陈捷
 * @LastEditTime: 2022-04-07 17:20:13
-->
<template>
  <div>
    <HeaderNav />
    <div class="back-white">
      <van-form @submit="search">
        <van-row>
          <van-col span="18">
            <div class="cardbody" style="margin: 10px">
              <van-cell-group>
                <van-field label="随访对象" value="安生心" readonly />
              </van-cell-group>
              <van-cell-group>
                <van-field
                  label="随访类型"
                  value="肺结核患者(第一次入户随访)"
                  disabled
                />
              </van-cell-group>

              <van-field
                v-model="fieldValue"
                is-link
                disabled
                label="随访方式"
                placeholder="请选择方式"
                @click="show = true"
              />
              <van-popup v-model="show" round position="bottom">
                <van-cascader
                  v-model="cascaderValue"
                  title="请选择方式"
                  :options="options"
                  @close="show = false"
                  @finish="onFinish"
                />
              </van-popup>
            </div>
          </van-col>
          <van-col span="6">
            <van-button
              round
              block
              class="search"
              native-type="submit"
              :disabled="submiting"
              :loading="submiting"
              loading-text="查询中..."
            >下一步</van-button>
          </van-col>
          <van-col span="24">
            <div class="cardbody" style="margin: 10px">
              <h3 style="padding: 0">补充信息</h3>
              <Loading v-if="loading" />
              <div v-else>
                <div class="tab-ul">
                  <van-cell-group>
                    <van-field
                      v-model="value1"
                      label="随访对象地址"
                      placeholder="请输入随访对象地址"
                    />
                  </van-cell-group>
                  <van-cell-group>
                    <van-field
                      v-model="value2"
                      label="当前位置"
                      placeholder="请输入当前位置"
                    />
                  </van-cell-group>
                </div>
              </div>
            </div>
            <NoData v-if="false" />
          </van-col>
        </van-row>
      </van-form>
      <NoData v-if="false" />
    </div>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';

import HeaderNav from '@/components/headerNav/index'
import Loading from '@/components/loading'
export default {
  name: 'ArchivesAdministration',
  // import引入的组件需要注入到对象中才能使用
  components: {
    HeaderNav,
    Loading
  },
  data() {
    // 这里存放数据
    return {
      loading: false,
      show: false,
      fieldValue: '',
      cascaderValue: '',
      submiting: false,
      // 随访方式选项列表
      options: [
        {
          text: '家庭',
          value: '330000'
        },
        {
          text: '个人',
          value: '320000'
        }
      ],

      value1: '', // 随访对象地址内容
      value2: '' // 随访位置
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  async created() {
    // 加载布尔值成功 初始化数据接口判断在这
    await this.getData()
    this.today = new Date()
    this.loading = false
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    // window.sessionStorage.clear();
    // console.log(this.$route.query.title);
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周.期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {},
  // 方法集合
  methods: {
    getData() {
      // 拉取数据接口
    },
    // 全部选项选择完毕后，会触发 finish 事件
    onFinish({ selectedOptions }) {
      this.show = false
      this.fieldValue = selectedOptions.map((option) => option.text).join('')
    },
    // 下一步点击事件
    search() {
      this.loading = true
      this.submiting = true

      setTimeout(() => {
        this.submiting = false
        // 接口读完
        this.loading = false
      }, 1000)
    }
  } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="less" scoped>
/deep/ .van-hairline--bottom::after {
  display: none !important;
}
/deep/ .van-field__label {
  color: #9b9b9b !important;
}
/deep/ .van-field__control {
  color: #4a4a4a;
  font-size: 15px;
}
.act {
  width: 60px;
}
.tab-ul {
  padding: 10px 0 0 0;
}
.search {
  width: calc(100% - 20px);
  margin: 5px auto;
  height: 175px;
  line-height: 175px;
  background: #4a90e2;
  border-radius: 17px;
  color: #fff;
  font-weight: 400;
  color: #ffffff;
  text-align: center;
  font-size: 20px;
}
.li-right p,
.li-right h3 > span {
  font-size: 18px;
}
</style>
